import { Component } from "react";
export default class fn extends Component {
    constructor() {
        super()
        this.state = {

        }
    }
    del = (id) => {
        let i = this.props.list.findIndex((item) => {
            return item.id === id
        })
        this.props.del(i)
    }
    edit = (id) => {
        let i = this.props.list.findIndex((item) => {
            return item.id === id
        })
        this.props.edit(i)
    }
    render() {
        let renders = this.props.list
        return (
            <div>
                <table width='300px' border='1px'>
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            renders.length > 0 ? renders.map((v, i) => {
                                return (<tr key={i}>
                                    <td>{v.name}</td>
                                    <td>{v.age}</td>
                                    <td>
                                        <button onClick={() => this.del(v.id)}>删除</button>
                                        <button onClick={() => this.edit(v.id)}>修改</button>
                                    </td>
                                </tr>)
                            }) : <tr><td colSpan={3}>暂无数据</td></tr>
                        }
                    </tbody>
                </table>

            </div>
        )
    }
}